<template>
  <view class="create-memory">
    <!-- 顶部进度条 -->
    <view class="progress-bar">
      <view class="progress" :style="{width: `${progress}%`}"></view>
    </view>
    
    <!-- 步骤提示 -->
    <view class="step-tips">
      <text>{{currentStep}}/4 {{stepTips[currentStep-1]}}</text>
    </view>
    
    <!-- 照片选择区域 -->
    <scroll-view class="photos-area" scroll-y v-if="currentStep === 1">
      <view class="photos-grid">
        <view 
          class="photo-item" 
          v-for="photo in photos" 
          :key="photo.id"
          @click="toggleSelect(photo)"
        >
          <image :src="photo.url" mode="aspectFill"></image>
          <view class="select-mask" v-if="photo.selected">
            <u-icon name="checkmark" color="#fff" size="40"></u-icon>
          </view>
        </view>
      </view>
    </scroll-view>
    
    <!-- 主题选择区域 -->
    <scroll-view class="themes-area" scroll-y v-if="currentStep === 2">
      <view 
        class="theme-item"
        v-for="theme in themes"
        :key="theme.id"
        :class="{active: selectedTheme === theme.id}"
        @click="selectTheme(theme)"
      >
        <image :src="theme.preview" mode="aspectFill"></image>
        <view class="theme-info">
          <text class="theme-name">{{theme.name}}</text>
          <text class="theme-desc">{{theme.description}}</text>
        </view>
      </view>
    </scroll-view>
    
    <!-- 音乐选择区域 -->
    <scroll-view class="music-area" scroll-y v-if="currentStep === 3">
      <view 
        class="music-item"
        v-for="music in musics"
        :key="music.id"
        :class="{active: selectedMusic === music.id}"
        @click="selectMusic(music)"
      >
        <view class="music-info">
          <text class="music-name">{{music.name}}</text>
          <text class="music-artist">{{music.artist}}</text>
        </view>
        <view class="music-control">
          <u-icon 
            :name="music.playing ? 'pause' : 'play-right'" 
            @click.stop="togglePlay(music)"
            size="40"
            color="#3a8838"
          ></u-icon>
        </view>
      </view>
    </scroll-view>
    
    <!-- 预览区域 -->
    <view class="preview-area" v-if="currentStep === 4">
      <view class="preview-window">
        <!-- 这里可以放预览视频 -->
        <image src="/static/preview.png" mode="aspectFit"></image>
      </view>
      <view class="preview-info">
        <text class="duration">预计时长：{{duration}}秒</text>
        <text class="photo-count">已选择{{selectedPhotos.length}}张照片</text>
      </view>
    </view>
    
    <!-- 底部操作栏 -->
    <view class="bottom-bar">
      <view 
        class="prev-btn" 
        v-if="currentStep > 1"
        @click="prevStep"
      >上一步</view>
      
      <view 
        class="next-btn"
        :class="{disabled: !canGoNext}"
        @click="nextStep"
      >
        {{currentStep === 4 ? '生成回忆' : '下一步'}}
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentStep: 1,
      progress: 25,
      stepTips: [
        '选择照片',
        '选择主题',
        '选择音乐',
        '预览效果'
      ],
      photos: [
        // 模拟数据
        {id: 1, url: '/static/src.png', selected: false},
        {id: 2, url: '/static/src.png', selected: false},
        // ... 更多照片
      ],
      themes: [
        {
          id: 1,
          name: '温暖回忆',
          description: '温暖色调，适合家庭照片',
          preview: '/static/src.png'
        },
        {
          id: 2,
          name: '青春时光',
          description: '活力四射，适合朋友聚会',
          preview: '/static/src.png'
        }
        // ... 更多主题
      ],
      musics: [
        {
          id: 1,
          name: '温暖时光',
          artist: '轻音乐',
          playing: false
        },
        {
          id: 2,
          name: '快乐时光',
          artist: '轻音乐',
          playing: false
        }
        // ... 更多音乐
      ],
      selectedTheme: null,
      selectedMusic: null,
      duration: 45
    }
  },
  computed: {
    selectedPhotos() {
      return this.photos.filter(p => p.selected);
    },
    canGoNext() {
      switch(this.currentStep) {
        case 1:
          return this.selectedPhotos.length > 0;
        case 2:
          return this.selectedTheme !== null;
        case 3:
          return this.selectedMusic !== null;
        case 4:
          return true;
      }
      return false;
    }
  },
  methods: {
    toggleSelect(photo) {
      photo.selected = !photo.selected;
    },
    selectTheme(theme) {
      this.selectedTheme = theme.id;
    },
    selectMusic(music) {
      this.selectedMusic = music.id;
    },
    togglePlay(music) {
      // 停止其他正在播放的音乐
      this.musics.forEach(m => {
        if (m.id !== music.id) {
          m.playing = false;
        }
      });
      music.playing = !music.playing;
      // 这里应该添加实际的音乐播放逻辑
    },
    prevStep() {
      if (this.currentStep > 1) {
        this.currentStep--;
        this.progress = this.currentStep * 25;
      }
    },
    nextStep() {
      if (!this.canGoNext) return;
      
      if (this.currentStep < 4) {
        this.currentStep++;
        this.progress = this.currentStep * 25;
      } else {
        this.generateMemory();
      }
    },
    generateMemory() {
      uni.showLoading({
        title: '正在生成...',
        mask: true
      });
      
      // 模拟生成过程
      setTimeout(() => {
        uni.hideLoading();
        uni.showModal({
          title: '生成成功',
          content: '回忆视频已生成完成，是否立即观看？',
          success: (res) => {
            if (res.confirm) {
              // 跳转到视频播放页
              uni.navigateTo({
                url: '/pages/memory/player'
              });
            } else {
              // 返回上一页
              uni.navigateBack();
            }
          }
        });
      }, 3000);
    }
  }
}
</script>

<style>
.create-memory {
  min-height: 100vh;
  background-color: #f8f8f8;
  padding-bottom: 120rpx;
}

.progress-bar {
  height: 4rpx;
  background-color: #eee;
  position: relative;
}

.progress {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background-color: #3a8838;
  transition: width 0.3s;
}

.step-tips {
  padding: 30rpx;
  text-align: center;
  font-size: 28rpx;
  color: #666;
}

/* 照片选择区域样式 */
.photos-grid {
  padding: 20rpx;
  display: flex;
  flex-wrap: wrap;
  gap: 10rpx;
}

.photo-item {
  width: calc(33.33% - 7rpx);
  position: relative;
  border-radius: 8rpx;
  overflow: hidden;
}

.photo-item image {
  width: 100%;
  height: 200rpx;
  display: block;
}

.select-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(58, 136, 56, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 主题选择区域样式 */
.themes-area {
  padding: 20rpx;
}

.theme-item {
  background-color: #fff;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.theme-item image {
  width: 100%;
  height: 300rpx;
}

.theme-info {
  padding: 20rpx;
}

.theme-name {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.theme-desc {
  font-size: 24rpx;
  color: #999;
  margin-top: 8rpx;
}

.theme-item.active {
  border: 2rpx solid #3a8838;
}

/* 音乐选择区域样式 */
.music-area {
  padding: 20rpx;
}

.music-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  background-color: #fff;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
}

.music-info {
  flex: 1;
}

.music-name {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 8rpx;
}

.music-artist {
  font-size: 24rpx;
  color: #999;
}

.music-item.active {
  background-color: #f0f8f0;
  border: 2rpx solid #3a8838;
}

/* 预览区域样式 */
.preview-area {
  padding: 20rpx;
}

.preview-window {
  background-color: #000;
  border-radius: 12rpx;
  overflow: hidden;
  margin-bottom: 20rpx;
}

.preview-window image {
  width: 100%;
  height: 400rpx;
}

.preview-info {
  background-color: #fff;
  padding: 20rpx;
  border-radius: 12rpx;
  display: flex;
  justify-content: space-between;
  font-size: 24rpx;
  color: #666;
}

/* 底部操作栏 */
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx;
  background-color: #fff;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  display: flex;
  justify-content: space-between;
}

.prev-btn, .next-btn {
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  border-radius: 40rpx;
  font-size: 28rpx;
}

.prev-btn {
  margin-right: 20rpx;
  background-color: #f5f5f5;
  color: #666;
}

.next-btn {
  background-color: #3a8838;
  color: #fff;
}

.next-btn.disabled {
  background-color: #ccc;
  opacity: 0.8;
}
</style> 